<template>
  <div>
    <!-- 标签页开始 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="order"></el-tab-pane>
      <el-tab-pane label="待支付"></el-tab-pane>
      <el-tab-pane label="待派单"></el-tab-pane>
      <el-tab-pane label="待接单"></el-tab-pane>
      <el-tab-pane label="待服务"></el-tab-pane>
      <el-tab-pane label="待确认"></el-tab-pane>
      <el-tab-pane label="已完成"></el-tab-pane>
    </el-tabs>
    <!-- 标签页结束 -->
    <!-- 表格开始 -->
    <el-table :data="orders" style="width: 100%">
      <!-- 订单编号 -->
      <el-table-column align="center" prop="id" label="订单编号">
      </el-table-column>
      <!-- 下单时间 -->
      <el-table-column
        width="180px"
        align="center"
        prop="orderTime"
        label="下单时间"
      >
        <template slot-scope="scope">
          {{ parseTime(scope.row.orderTime) }}
        </template>
      </el-table-column>
      <!-- 总价 -->
      <el-table-column align="center" prop="total" label="总价">
        <template slot-scope="scope">
          ¥
          <label style="color: red; font-size: 18px">{{
            scope.row.total
          }}</label>
          元
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column align="center" prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <!-- 顾客ID -->
      <el-table-column align="center" prop="customerId" label="顾客ID">
      </el-table-column>
      <!-- 员工ID -->
      <el-table-column align="center" prop="employeeId" label="员工ID">
      </el-table-column>
      <!-- 操作 -->
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            class="details"
            @click="toDetails(scope.row.id)"
            type="text"
            size="mini"
            >详情</el-button
          >
          <el-button
            class="send"
            v-if="scope.row.status == '待派单'"
            @click="applySend(scope.row.id)"
            type="text"
            size="mini"
            >派单</el-button
          >
          <el-button
            class="cancelSend"
            v-if="scope.row.status == '待接单'"
            @click="cancelSend(scope.row.id)"
            type="text"
            size="mini"
            >取消派单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 派单对话框开始 -->
    <el-dialog title="派单" :visible.sync="sendDialogFormVisible">
      <el-form>
        <el-radio-group v-model="radio">
          <el-radio
            style="margin: 10px"
            v-for="employee in employeeList"
            :key="employee.id"
            :label="employee.username"
            @change="employeeName(employee)"
            border
            >{{ employee.username }}</el-radio
          >
        </el-radio-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            sendDialogFormVisible = false;
            radio = undefined;
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="sendHandler">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 派单对话框开始 -->
    <!-- 分页开始 -->
    <el-pagination
      style="float: right; margin: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="list.page"
      :page-sizes="[total, 12, 9, 6, 3]"
      :page-size="list.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { parseTime } from "../../utils/index";
import { get, post } from "../../utils/request";
export default {
  data() {
    return {
      // 标签页
      activeName: "order",
      // page数据
      list: {
        page: 1,
        pageSize: 100,
      },
      // 判断状态
      status: {
        0: null,
        1: "待支付",
        2: "待派单",
        3: "待接单",
        4: "待服务",
        5: "待确认",
        6: "已完成",
      },
      // 派单对话框显示
      sendDialogFormVisible: false,
      // 单选框
      radio: undefined,
      // 派单id及订单id
      sendId: {},
    };
  },
  computed: {
    ...mapState("order", ["orders", "total", "employeeList"]),
  },
  methods: {
    // 时间转换
    parseTime,
    ...mapActions("order", ["findAllOrder", "querySendPerson"]),
    // 选择显示xxx条/页
    handleSizeChange(val) {
      this.list.pageSize = val;
      this.findAllOrder(this.list);
    },
    // 显示当前页
    handleCurrentChange(val) {
      this.list.page = val;
      this.findAllOrder(this.list);
    },
    // 切换标签页
    handleClick(tab) {
      delete this.list.status;
      if (this.status[tab.index]) {
        this.list.status = this.status[tab.index];
      }
      this.findAllOrder(this.list);
    },
    // 点击派单
    applySend(id) {
      this.sendId.orderId = id;
      this.sendDialogFormVisible = true;
    },
    // 选择员工派单
    employeeName(employee) {
      this.sendId.waiterId = employee.id;
    },
    // 点击确认
    sendHandler() {
      this.sendDialogFormVisible = false;
      get("/order/sendOrder", this.sendId).then((res) => {
        if (res.status === 200) {
          this.$message({
            type: "success",
            message: res.message,
          });
          this.findAllOrder(this.list);
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
      this.radio = undefined;
    },
    // 取消派单
    cancelSend(id) {
      this.$confirm("此操作将取消派单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          get("/order/cancelSendOrder", { orderId: id }).then((res) => {
            if (res.status === 200) {
              this.$message({
                type: "success",
                message: res.message,
              });
              this.findAllOrder(this.list);
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 跳转详情界面
    toDetails(id) {
      // 获取订单详情
      this.$router.push({
        path: "/order/details",
        query: {
          id: id,
        },
      });
    },
  },
  created() {
    // 获取订单信息
    this.findAllOrder(this.list);
    // 获取可派单人员
    this.querySendPerson({ ...this.list, roleId: 1 });
  },
};
</script>

<style lang="scss" scoped>
.details {
  color: black;
}
.details:hover {
  color: rgb(103, 194, 58);
}
.send {
  color: rgb(103, 194, 58);
}
.send:hover {
  color: orange;
}
.cancelSend {
  color: rgb(55, 65, 206);
}
.cancelSend:hover {
  color: orange;
}
</style>